<template>
  <div class="fu">
    <div class="left">
      <i class="el-icon-s-claim"></i>
      <span>成绩录入</span>
    </div>
    <div style="clear: left"></div>
    <div class="wai-bord">

      <el-form :inline="true" :model="pageList" class="demo-form-inline right">

        <el-form-item>
          <el-input v-model="pageList.cname" placeholder="课程名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="pageList.tname" placeholder="学员名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <div style="clear: right"></div>

      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"

        :page-size="pageList.pageSize"
        :total="pageList.total">
      </el-pagination>

      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">

            <el-table-column
              prop="scId"
              label="成绩ld">
            </el-table-column>

            <el-table-column
              prop="courseName"
              label="课程名">
            </el-table-column>

            <el-table-column
              prop="studentName"
              label="学生名">
            </el-table-column>

            <el-table-column
              prop="scDailyScore"
              label="平时成绩">
            </el-table-column>

            <el-table-column
              prop="scExamScore"
              label="考试成绩">
            </el-table-column>

            <el-table-column
              prop="scScore"
              label="总成绩">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row)">打分
                </el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="打分"
      :visible.sync="dialogFormVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="form" label-width="80px">
        <el-form-item label="成绩id">
          <el-input v-model="score.scId" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="平时分">
          <el-input type="number" v-model="score.scDailyScore" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试分">
          <el-input type="number" v-model="score.scExamScore" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总分">
          <el-input type="number" v-model="score.scScore" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveCourse">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {deletefn, get, post, put, update} from "../../common/request";

  export default {
    name: "TeacherCourseSave",
    data() {
      return {
        tableData: [
          {
            scId: 1,
            courseName: '',
            studentName: '',
            scDailyScore: '',
            scExamScore: '',
            scScore: ''
          }
        ],
        pageList: {
          currentPage: 1,
          pageSize: 8,
          total: 0,
          cname: '',
          tname: ''
        },
        score:{
          scId: '',
          scDailyScore: '',
          scExamScore: '',
          scScore: ''
        },
        dialogFormVisible: false
      }
    },

    mounted() {
      this.getAll();
    },
    methods: {
      getAll() {
        get("/course/getTeacherClass", this.pageList).then(res => {
          this.tableData = res.data.list;
          this.pageList.currentPage = res.data.currentPage;
          this.pageList.pageSize = res.data.pageSize;
          this.pageList.total = res.data.total;
        })
      },
      handleSaveCourse(index, row) {
        console.log(index, row);

        put("/teacher/saveCourse/",this.score).then(res => {

          this.getAll();
          if (res.code == 1){
            this.$message.success(res.msg);
          }else {
            this.$message.error(res.msg);
          }
        })
      },
      handleCurrentChange(val) {
        this.pageList.currentPage = val;
        this.getAll();
      },
      onSubmit() {
        this.getAll();
      },
      handleEdit(index, row) {
        console.log(index, row);
        //发送请求实现 选修
        this.dialogFormVisible = true;
        this.score.scId = row.scId;
        this.score.scDailyScore = row.scDailyScore;
        this.score.scExamScore = row.scExamScore;
        this.score.scScore = row.scScore;
      },
      handleClose() {
        this.scId = "";
        this.scDailyScore = "";
        this.scExamScore = "";
        this.scScore = "";
      },
    }
  }
</script>

<style scoped>

  .left {
    float: left;
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }

  .wai-bord {
    background-color: white;
    border: #dcdfe6 solid 1px;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .right {
    float: right;
  }
</style>
